<template>
    <!-- 资金管理 账变明细 筛选彩种 -->
    <div id="wrap" class="box-shadow">
        <div>
            <p class="allType" @click="changeActive(item, 'all')" :class="activeId == item.id ? 'active' : ''" v-for="item in options.all" :key="item.id">{{item.value}}</p>
            <p class="income">收入</p>
            <ul class="incomeItems">
                <li class="incomeItem" @click="clickIncome(item, 'income')" :class="activeId == item.id ? 'active':''" v-for="(item,index) in options.income" :key="index">{{ item.value }}</li>
            </ul>
            <p class="expenditure">支出</p>
            <ul class="expenditureItems">
                <li class="expenditureItem" @click="clickExpenditure(item, 'expense')" :class="activeId == item.id ? 'active' : ''" v-for="(item,index) in options.expenditure" :key="index">{{ item.value }}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'fundManagement',
    data(){
        return{
            
            // clickActive: '',//给全部类型按钮添加类名
            // //两个参数用来记录点击获取的所以，用于动态添加类名
            // clickIndex1: -1,
            // clickIndex2: -1,
            activeId: 0,
            //收入
            options: {
              all: [{
                id: 0,
                value: '所有类型',
              }],
              income:[
                {
                  id: 14,
                  value: '全部',
                },
                {
                    id: 1,
                    value: '个人充值',
                },
                {
                    id: 2,
                    value: '购彩奖金',
                    type: 'income'
                },
                {
                    id: 3,
                    value: '彩票返点'
                },
                {
                    id: 4,
                    value: '斗牛奖金'
                },
                {
                    id: 5,
                    value: '未中奖退本金'
                },
                {
                    id: 6,
                    value: '代理分红'
                },
                {
                    id: 7,
                    value: '日工资'
                },
                {
                    id: 8,
                    value: '系统充值'
                },
                {
                    id: 9,
                    value: '个人撤单'
                },
                {
                    id: 10,
                    value: '系统撤单'
                },
                {
                    id: 11,
                    value: 'AG奖金'
                },
                {
                    id: 12,
                    value: '拒绝提款'
                },
                {
                    id: 13,
                    value: '资金转换'
                },
              ],
              expenditure:[
                {
                    id: 15,
                    value: '全部'
                },
                {
                    id: 22,
                    value: '提款'
                },
                {
                    id: 16,
                    value: '购彩'
                },
                {
                    id: 17,
                    value: '斗牛'
                },
                {
                    id: 18,
                    value: '申请提款'
                },
                {
                    id: 19,
                    value: '系统扣款'
                },
                {
                    id: 20,
                    value: 'AG亏损'
                },
                {
                    id: 21,
                    value: '资金转换'
                },
              ]
            }
            
            //支出
            

        }
    },
    methods:{
        //给全部类型按钮添加类名
        changeActive(val, type){
          this.activeId = val.id 
          this.$emit('click', val, type)
        },
        //收入部分按钮点击事件
        clickIncome(val,type){
            this.activeId = val.id

            //抛出按钮值
            this.$emit('click', val, type);
        },
        //支出部分按钮点击事件
        clickExpenditure(val, type){
            this.activeId = val.id;
            //抛出按钮值
            this.$emit('click', val, type);
            // console.log(val)
        }
    }
}
</script>

<style lang="stylus" scoped>
    #wrap
        width 666px;
        height 360px;
        border 1px solid #dbd3d3;
        background-color #faf8f8;
        box-sizing border-box 
        //所有类型
        .allType
            width 96px;
            height 32px;
            // background-color #e02828;
            color #2b3042;
            border-radius 4px;
            line-height 32px;
            text-align center;
            font-size 14px;
            margin-top 19px;
            margin-bottom 16px;
            margin-left 19px;
            cursor pointer;
            box-shadow 0 1px 4px 0px rgba(0,0,0,.2);
            border 1px solid #dbd3d3;
        
        //收入
        .income
            font-size 14px;
            margin-left 23px;
            margin-bottom 15px;
            margin-top 14px;
            font-weight 700

        
        //收入项们
        .incomeItems
            width 647px;
            // height 150px;
            // border 1px solid red;
            overflow auto;
            list-style none;
            margin-left 19px;

            .incomeItem
                width 94px;
                height 30px;
                border 1px solid #dbd3d3;
                text-align center;
                line-height 30px;
                border-radius 3px;
                margin-right 10px;
                float left;
                margin-bottom 9px;
                font-size 14px;
                box-shadow 0 1px 4px 0px rgba(0,0,0,.2);
                cursor pointer;
                color #2b3042;
                // box-shadow 3px 5px 5px 3px #eee inset;
            .active 
                background-color #e02828;
                color #fff;

        //支出
        .expenditure
            font-size 14px;
            margin-top 14px;
            margin-left 23px;
            margin-bottom 15px;
            font-weight 700
        //支出项们
        .expenditureItems
            width 647px;
            // height 150px;
            // border 1px solid red;
            overflow auto;
            list-style none;
            margin-left 19px;

            .expenditureItem  
                width 94px;
                height 30px;
                border 1px solid #dbd3d3;
                text-align center;
                line-height 30px;
                border-radius 3px;
                margin-right 10px;
                color #2b3042;
                float left;
                margin-bottom 9px;
                font-size 14px;
                box-shadow 0 1px 4px 0px rgba(0,0,0,.2);
                cursor pointer;
            .active 
                background-color #e02828;
                color #fff;
        
        .active
            background-color #e02828;
            color #fff;

        

</style>